
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WebTap</title>
        <style>
    
@font-face {font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_926032_jplb4eto8s.eot?t=1542638589688'); /* IE9*/
  src: url('//at.alicdn.com/t/font_926032_jplb4eto8s.eot?t=1542638589688#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUYAAsAAAAAB4wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hEgDY21hcAAAAYAAAABVAAABhmSp0OpnbHlmAAAB2AAAAVAAAAFwz0nTxGhlYWQAAAMoAAAALwAAADYTUR33aGhlYQAAA1gAAAAcAAAAJAfeA4RobXR4AAADdAAAAAwAAAAMDAAAAGxvY2EAAAOAAAAACAAAAAgAQAC4bWF4cAAAA4gAAAAfAAAAIAEYAFVuYW1lAAADqAAAAUUAAAJtPlT+fXBvc3QAAATwAAAAKAAAADnyZ8JdeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8T0TZG7438AQw9zA0AAUZgTJAQDfjgwCeJztkMENgDAMAy9p6QMhpG7Bg4F4MX7XKG4KW2DpYsXJy8ACJHGKDHZjDF1KLfLEGnmOnyI3vO2t9g6fS6ZbCXeNwq8t5vFuPtqajGZbneAPyv4NwgAAAHicTc6xSwJxFAfw9867k34XCfnzzhBPz0vPIMpOuUtCpcJwaNIh1LmlLdrrBy02tYQU1Cg0xLUYrfk3FA23+Cc0RYv87CQIpy+Px/e9DwgAUyZCiMEiZAGiVXQdHekSWhuIVnUWliyEqS4UbcfVVNspWUwc9tr9Tqff7r2Ejr1GZKfywUZTqc4G3YPLshffL8TxLdgJrbun2xaKQ/7+fPJzdspQmsKoO2D1tbynFXZXAJT//xAIliEKKUjDOthQhRo0ANBQQXPAzYElwwIGPswWDTuJ1DQyFSyF54eAb6uam1kStIBbwZxl0hk5l5EF4CCh4ftoSBIf+z4fYxmPzodZ/snvCTYVhXvEVLBJCPcUQmuHe7FycsuQybUoq9+rMZ1SPYYsKEpzh/gNf7ReLzAfUiaETJTMX/CvtGmmHxKb2wlZvCJ2hNIUpfAL0FRcbXicY2BkYGAA4ozz8t/j+W2+MnCzMIDADYk3fxH0/wYWBuYGIJeDgQkkCgBROgvAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTADAEcJAmwEAAAABAAAAAQAAAAAAAAAAEAAuHicY2BkYGBgZvBk4GYAASYg5gJCBob/YD4DABC5AW4AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGtOL+0uDSfrSqzsjQxj4EBADRzBXY=') format('woff'),
  url('//at.alicdn.com/t/font_926032_jplb4eto8s.ttf?t=1542638589688') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_926032_jplb4eto8s.svg?t=1542638589688#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-sousuo:before { content: "\e60e"; }

.icon-ziyuan:before { content: "\e611"; }
 
        *{
            margin: 0;
            padding: 0;
        }
        .box_wrapper{
          background: #cccccc;
          background-position: center center;
          background-size: cover;
          height: 100%;
          left: 0;
          margin: 0;
          padding: 0;
          position: fixed;
          top: 0;
          transition: opacity 700ms;
          width: 100%;
        }
        .goole{
            margin: 160px auto 24px;
            width: 272px;
            height: 92px;
        }
        .goole img{
            display: block;
            width: 100%;
        }
        .search{
            width: 560px;
            height: 44px;
            margin: 0 auto;
            background: #fff;
            border-radius: 50px;
            position: relative;
        }
        .search input{
          font-size: 18px;
          line-height: 42px;
          background: transparent;
          border: none;
          bottom: 0;
          box-sizing: border-box;
          left: 15px;
          margin: 0;
          outline: none;
          padding: 0 8px;
          position: absolute;
          top: 2px;
          width: 88%;
        }
        .search span{
          position: absolute;
          right: 20px;
          font-size: 18px;
          line-height: 42px;
          color: #ccc;
          cursor: pointer;
        }
        .icon_list{
            width: 560px;
            margin: 35px auto 0;
            list-style: none;
        }
        .icon_list li{
            float: left;
            width: 112px;
            height: 112px;
            position: relative;
        }
        .title{
            width: 48px;
            height: 48px;
            margin: 0 auto 16px;
        }
        .goole_icon{
            font-size: 48px!important;
        }
        .desc{
            text-align: center; color: #fff; 
        } 
        .desc a,.desc a:link,.desc a:hover,.desc a:visited{
             text-decoration: none; color: #fff;
        }
        .icon {
            width: 1em; height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
      </style>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script>
            /**
  * 对json数组进行搜索
  * @param {array} array [需要排序的数组]
  * @param {string} type [需要检索的字段]
  * @param {string} value [字段中应包含的值]
  * @return {array}    [包含指定信息的数组]
  */
 var u={};
 u.search=function(array,type,value) {
  if(!u.isArray(array)) throw new Error('第一个参数必须是数组类型');
  var arr=[];
  arr=array.filter(function(a) { 
   return a[type].toString().indexOf(value)!=-1;
  });
  return arr;
 };
</script>
    </head>
    <body>
        <div class="box_wrapper">
            <div class="goole"><img src="http://webtap.cn/img/3.png" alt="Utry"></div>
            <div class="search">
                <input type="text" class="search_btn">
                <span class="iconfont icon-sousuo"></span>
            </div>
            <ul class="icon_list">
                <li>
                    <div class="title">
                        <a href="http://www.italent.cn"> <img class="icon
                                goole_icon"
                                src="https://static.kodcloud.com/index/images/common/ico.ico"
                                /></a>
                    </div>
                    <div class="desc">
                        <a href="http://www.italent.cn">Italent</a>
                    </div>
                </li>
                <li>
                    <div class="title">
                        <a href="http://kod.utrycc.com/kodexplorer4.25/"> <img
                                class="icon goole_icon"
                                src="https://static.kodcloud.com/index/images/common/ico.ico"
                                /></a>
                    </div>
                    <div class="desc">
                        <a href="http://kod.utrycc.com/kodexplorer4.25/">外网Kod</a>
                    </div>
                </li>


            </ul>
        </div>
        <script> 
        $(function(){
            var json = [
                {
                    "name":"KOD1",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD2",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD3",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD4",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD5",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD6",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },{
                    "name":"KOD7",
                    "icon":"https://static.kodcloud.com/index/images/common/ico.ico",
                    "href":"https://kodcloud.com/"
                },
            ];

each(json)

$('.search_btn').bind('input propertychange', function() {  
   console.log($(this).val());
   var search_json = {};
    search_json=   search($(this).val(),json)
console.log(typeof(search_json));
if( typeof(search_json) != 'undefined' && search_json.length){
  console.log(search_json);
 each(search_json)
}else{
  console.log("no find.");
  each(json)
}

});  
            
function each(json) {
    var html = "";
    $.each(json,function(k,v){
       html += '<li><div class="title"><a href="'+v.href+'"><img class="icon goole_icon" src="'+v.icon+'" /></a></div><div class="desc"><a href="'+v.href+'">'+v.name+'</a></div></li>';
   });
   $('.icon_list').empty('');
   $('.icon_list').append(html);
}
function search(k,json){
    if (k == "") return;
 
    var arr = [];
    var patt = new RegExp(k);
    for(var i = 0; i < json.length; i++){
        if(patt.test(json[i].name) || patt.test(json[i].idn)){
            arr.push(json[i]);
        }
    }
return arr;
}
        });
            </script>
    </body>
</html>
